<template>
  <div style="height: 70px;width: 100%;background: cadetblue;text-align: center">
    <span style="color: white;line-height: 70px;font-size: 25px">修改密码</span>
  </div>

  <div class="bigDiv">
    <div>
      <span>请输入旧密码：</span>
      <el-input type="password" v-model="oldPwd" placeholder="请输入旧密码" input-style="width:200px"/>
    </div>
    <div>
      <span>请输入新密码：</span>
      <el-input type="password" v-model="newPwd1" placeholder="请输入新密码" input-style="width:200px"/>
    </div>
    <div>
      <span>请确认新密码：</span>
      <el-input type="password" v-model="newPwd2" placeholder="请确认新密码" input-style="width:200px"/>
    </div>
    <div>
      <el-button type="warning" round style="margin-left: 30%;width: 90px;height: 50px;font-size: 16px" @click="changPwd">确认修改</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      userObj:{},
      oldPwd:"",
      newPwd1:"",
      newPwd2:"",
    }
  },
  methods:{
    getLoginUser(){
      axios.get("/project/user/getLoginUser").then(resp =>{
        this.userObj = resp.data;
      })
    },
    changPwd(){
      this.getLoginUser();
      if (this.oldPwd != this.userObj.password){
        ElMessage({
          showClose: true,
          message: '用户密码错误',
          type: 'error',
        })
        this.oldPwd="";
        this.newPwd1="";
        this.newPwd2="";
      }
      else if(this.newPwd1 != this.newPwd2){

        ElMessage({
          showClose: true,
          message: '前后密码输入不一致',
          type: 'error',
        })
        this.oldPwd="";
        this.newPwd1="";
        this.newPwd2="";
      }
      else {
        axios.get("/project/user/updatePwd",{params:{newPwd:this.newPwd2}}).then(resp =>{
          ElMessage({
            showClose: true,
            message: '修改密码成功',
            type: 'success',
          })
          this.oldPwd="";
          this.newPwd1="";
          this.newPwd2="";
          this.$router.push('/login')
        })
      }
    }
  },
  created() {
    this.getLoginUser();
  },
}
</script>

<style scoped>
span {
  font-size: 22px;
}

.bigDiv {
  width: 400px;
  height: 600px;
  margin: auto;
}
.bigDiv>div{
  margin-top: 40px;
}
.bigDiv span{
  font-size: 16px;
  font-weight: bold;
  color: cadetblue;
}

</style>